<template>
  <view class="content">
    <!-- 搜索框区域 -->
    <view class="content-search">
      <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
    </view>
    <!-- 搜索列表区域 -->
    <view class="content-searchList" v-if="searchResult.length > 0">
      <view class="content-searchList-item" v-for="(item,index) in searchResult" :key='index' @tap="toGoodDetail(item.goods_id)">
        <view class="goodsName">
          {{item.goods_name}}
        </view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史区域 -->
    <view class="content-history" v-else>
      <!-- 标题区域 -->
      <view class="content-history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @tap="clearHistoryList"></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="content-history-list">
        <uni-tag :text="item" v-for="(item, index) in historys" :key="index" @tap="toGoodsList(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    API_SearchList
  } from '@/api/API.js'
  import {
    TOAST_SHOW_FAIL,
    NAV_TO
  } from '@/utils/view_utils.js'
  export default {
    data() {
      return {
        key: '', // 搜索关键词
        timer: null, // 定时器名
        searchResult: [], // 搜索结果
        historySearchList: ['a', 'bb', 'cc'], // 搜索历史
      };
    },
    onLoad() {
      // 获取搜索的历史记录
      this.historySearchList = JSON.parse(uni.getStorageSync('historyKeyList') || [])
    },
    computed: {
      historys() {
        return this.historySearchList.reverse();
      }
    },
    methods: {
      // 点击搜索绑定的input事件 e = value
      input(e) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.key = e;
          this.getSearchList()
        }, 300)
      },
      // 根据key获取搜索列表
      async getSearchList() {
        if (this.key === '') {
          this.searchResult = []
          return
        }
        const {
          data: res
        } = await API_SearchList({
          query: this.key
        });
        if (res.meta.status !== 200) return TOAST_SHOW_FAIL()
        if(res.message.goods.length <= 0) {
          this.searchResult = [];
          return TOAST_SHOW_FAIL("暂无数据！")
        }
        this.saveSearchKey();
        this.searchResult = res.message.goods;
      },
      // 保存搜索关键字
      saveSearchKey() {
        this.historySearchList.push(this.key);
        const set = new Set(this.historySearchList);
        this.historySearchList = Array.from(set);
        
        // 将搜索历史保存到本地缓存中
        uni.setStorageSync('historyKeyList',JSON.stringify(this.historySearchList));
      },
      // 根据goods_id去商品详情
      toGoodDetail(goods_id) {
        NAV_TO('/subpkg/goods_detail/goods_detail',{
          goods_id,
        })
      },
      // 清空搜索历史记录
      clearHistoryList() {
        this.historySearchList = [];
        uni.setStorageSync('historyKeyList',JSON.stringify(this.historySearchList));
      },
      // 点击历史记录去商品列表
      toGoodsList(item) {
        NAV_TO('/subpkg/goods_list/goods_list',{
          query: item
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    &-search {
      position: sticky;
      top: 0;
      z-index: 999;
    }
    &-searchList {
      padding: 0 10rpx;
      &-item {
        font-size: 24rpx;
        padding: 26rpx 0;
        border-bottom: 2rpx solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .goodsName {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 6rpx;
        }
      }
    }
    &-history {
      padding: 0 10rpx;
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        font-size: 26rpx;
        border-bottom: 2rpx solid #efefef;
      }
      &-list {
        display: flex;
        flex-wrap: wrap;
        uni-tag {
          margin: 10rpx 10rpx 0 0;
        }
      }
    }
  }
</style>
